<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        a{
            text-decoration: none;
        }
        .page{
            margin: 200px;

        }
       .page .current {
            display: inline-block;
            height: 25px;
            line-height: 25px;
            padding: 0 10px;
            margin: 0 2px;
            color: #fff;
            background-color: #428bca;
            border: 1px solid #428bca;
            border-radius: 4px;
            vertical-align: middle;
        }
       .page a {
           color: #428bca;
           display: inline-block;
           height: 25px;
           line-height: 25px;
           padding: 0 10px;
           border: 1px solid #ddd;
           margin: 0 2px;
           border-radius: 4px;
           vertical-align: middle;
       }
        .page a:hover{
            border: 1px solid #428bca;
        }
        .disabled {
            display: inline-block;
            height: 25px;
            line-height: 25px;
            padding: 0 10px;
            margin: 0 2px;
            color: #bfbfbf;
            background: #f2f2f2;
            border: 1px solid #bfbfbf;
            border-radius: 4px;
            vertical-align: middle;
        }
    </style>
</head>
<body>

    <div class="page">
        <span class="disabled">上一页</span>
        <span class="current">1</span>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <span>...</span>
        <a href="">100</a>
        <a href="">下一页</a>
    </div>

<script src="../../jQuery/jquery-3.1.0.js"></script>
<script src="jquery.page.js"></script>
<script>
    $(".page").createPage({
        pageCount:100,
        current:1,
        backFn:function(p){
            //console.log(p);
        }
    });
</script>
</body>
</html>